<template>
	<view class="flex-1 flex-col ">
		<view class="px-3  mt-4">
			<view class="font-16 d-flex  justify-between  "
				style="background-color:#E07DA1 ;border-radius: 24rpx 24rpx 0 0 ;padding: 22rpx 32rpx 28rpx;">
				<view class="font-600" style="color: #FFFFFF;">
					取消预约清单
				</view>
				<view class="" style="color:#FAFAFA ;" @click="$u.route({url:'pages/myReservation/ruleDescription'})">
					退订规则说明
				</view>
			</view>
			<view class="info">
				<view class="pb-2 title">
					预约信息
				</view>
				<view class="d-flex items-center font-14 mt-3">
					<view class="">门<text style="color: #F6F6F6;">门店</text>店：</view>
					<view class="ps-2 font-600 text-black flex-1" style="word-break: break-all;">
						{{detailInfo.reserve_info.store||'-'}}
					</view>
				</view>
				<view class="d-flex items-center font-14 mt-3">
					<view class="">教<text style="color: #F6F6F6;">门店</text>室：</view>
					<view class="ps-2 font-600 text-black flex-1" style="word-break: break-all;">
						{{detailInfo.reserve_info.room||'-'}}
					</view>
				</view>
				<view class="d-flex items-center font-14 mt-3">
					<view class="">预约时间：</view>
					<view class="ps-2 font-600 text-black">{{detailInfo.reserve_info.order_time||'-'}}</view>
				</view>
				<view class="d-flex items-center font-14 mt-3">
					<view class="">支付方式：</view>
					<view class="ps-2 font-600 text-black">{{detailInfo.reserve_info.pay_info||'-'}}</view>
				</view>
				<view>
					<view class="pb-2 title" style="margin-top: 56rpx;">
						预约信息
					</view>
					<view class="mt-4 font-500 font-14 text-black">
						{{detailInfo.tip||'-'}}
					</view>
				</view>
				<view v-if="detailInfo.pay_money">
					<view class="pb-2 title" style="margin-top: 56rpx;">
						微信支付
					</view>
					<view class="mt-4 font-500 font-14 text-black d-flex items-center">
						<image src="../../static/imgs/wechatPay.png" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<text class="ps-2 ms-1">{{detailInfo.pay_money}}元（{{detailInfo.pay_tip}}）</text>
					</view>
				</view>
			</view>
			<view class="footer d-flex items-center justify-between px-2">
				<view class="think" @click="goBack">
					我在想想
				</view>
				<view class="cancle" @click="submit">
					确认取消预约
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailInfo: {},
				id: ''
			}
		},
		onLoad({
			id
		}) {
			if (!id) return uni.navigateBack()
			this.id = id
			this.getDetail(id)
		},
		methods: {
			getDetail(id) {
				this.$u.api.cancelMyReserve({
					id,
					confirm: 0
				}).then(res => {
					if (res.code == 1) {
						this.detailInfo = res.data
					} else {
						// this.$u.toast(res.msg)
						uni.showModal({
							showCancel: false,
							confirmText: '我知道了',
							content: res.msg,
							success: () => {
								uni.navigateBack()
							}
						})
					}
				})
			},
			submit() {
				uni.showModal({
					content: '确认要取消此预约吗?',
					success: (res) => {
						if (res.confirm) {
							this.$u.api.cancelMyReserve({
								id: this.id,
								confirm: 1
							}).then((res) => {
								if (res.code == 1) {
									if (this.detailInfo.pay_money) {
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: res.data.timeStamp,
											nonceStr: res.data.nonceStr,
											package: res.data.package,
											signType: res.data.signType,
											paySign: res.data.paySign,
											success: (ress) => {
												console.log(ress);
												if (ress.errMsg == 'requestPayment:ok') {
													this.getInfo()
													uni.showModal({
														content: '你的订单已取消',
														showCancel: false,
														success: () => {
															setTimeout(() => {
																uni.navigateBack()
															}, 100)
														}
													})
												} else {
													this.$u.toast(ress.errMsg)
												}
											},
											fail: (err) => {
												if (err.errMsg ==
													"requestPayment:fail cancel") {
													this.$u.toast('你已取消支付')
												} else {
													this.$u.toast('如果预约失败，请联系管理员')
												}
											}
										});
									} else {
										this.getInfo()
										uni.showModal({
											content: res.msg,
											showCancel: false,
											success: () => {
												setTimeout(() => {
													uni.navigateBack()
												}, 100)
											}
										})

									}
								} else {
									this.$u.toast(res.msg)
								}
							})
						}
					}
				})
			},
			getInfo() {
				if (this.vuex_has_login) {
					this.$u.api.getUserInfo().then(res => {
						this.$u.vuex('vuex_user', {
							...this.vuex_user,
							...res.data
						})
					})
				}
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.info {
		background-color: #F6F6F6;
		border-radius: 0 0 24rpx 24rpx;
		padding: 26rpx 32rpx 68rpx;

		.title {
			font-weight: 600;
			border-bottom: 2rpx solid #E3E3E3;
		}
	}

	.footer {
		margin-top: 126rpx;

		.think {
			padding-left: 48rpx;
			text-align: center;
			font-size: 40rpx;
			color: #909399;
		}

		.cancle {
			width: 356rpx;
			height: 96rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			background: #D85886;
			border-radius: 40rpx 0 40rpx 40rpx;
		}
	}
</style>